<template>
  <a-form
    ref="formRef"
    :model="formData"
    class="form"
    :label-col-props="{ span: 8 }"
    :wrapper-col-props="{ span: 16 }"
  >
    <a-form-item
      field="oldPwd"
      :label="$t('userSetting.form.oldPwd')"
      :rules="[
        {
          required: true,
          message: $t('userSetting.form.oldPwd.required'),
        },
      ]"
    >
      <a-input-password
        v-model="formData.oldPwd"
        :placeholder="$t('userSetting.form.placeholder.common')"
        allow-clear
      ></a-input-password>
    </a-form-item>
    <a-form-item
      field="newPwd"
      :label="$t('userSetting.form.newPwd')"
      :rules="[
        {
          required: true,
          message: $t('userSetting.form.newPwd.required'),
        },
      ]"
    >
      <a-input-password
        v-model="formData.newPwd"
        :placeholder="$t('userSetting.form.placeholder.common')"
        allow-clear
      ></a-input-password>
    </a-form-item>
    <a-form-item
      field="enterPwd"
      :label="$t('userSetting.form.enterPwd')"
      :rules="[
        {
          required: true,
          message: $t('userSetting.form.enterPwd.required'),
        },
      ]"
    >
      <a-input-password
        v-model="formData.enterPwd"
        :placeholder="$t('userSetting.form.placeholder.common')"
        allow-clear
      ></a-input-password>
    </a-form-item>
    <a-form-item>
      <a-space>
        <a-button type="primary" :loading="loading" @click="validate">
          {{ $t('userSetting.save') }}
        </a-button>
        <a-button type="secondary" @click="reset">
          {{ $t('userSetting.reset') }}
        </a-button>
      </a-space>
    </a-form-item>
  </a-form>
</template>

<script lang="ts" setup>
  import { ref } from 'vue';
  import { FormInstance } from '@arco-design/web-vue/es/form';
  import { modifyPassword, PwdParams } from '@/api/user';
  import { Message } from '@arco-design/web-vue';
  import pwdEncrypt from '@/utils/encryption/pwd';
  import useLoading from '@/hooks/loading';
  import { useI18n } from 'vue-i18n';

  const { loading, setLoading } = useLoading();
  const { t } = useI18n();
  const formRef = ref<FormInstance>();
  const formData = ref<PwdParams>({
    oldPwd: '',
    newPwd: '',
    enterPwd: '',
  });
  const validate = async () => {
    if (loading.value) return;
    const res = await formRef.value?.validate();
    if (!res) {
      if (formData.value.newPwd !== formData.value.enterPwd) {
        Message.error(t('userSetting.password.edit.error'));
        return;
      }
      setLoading(true);
      try {
        const params: PwdParams = {
          newPwd: pwdEncrypt(formData.value.newPwd),
          oldPwd: pwdEncrypt(formData.value.oldPwd),
        };
        const result = await modifyPassword(params);
        if (result.status) {
          Message.success(t('userSetting.password.edit.success'));
          // TODO: 是否要更新记住在本地的密码
        }
      } catch (e: any) {
        // nothing to do here
      } finally {
        setLoading(false);
      }
    }
  };
  const reset = async () => {
    await formRef.value?.resetFields();
  };
</script>

<style scoped lang="less">
  .form {
    width: 540px;
    margin: 0 auto;
    :deep(.arco-form-item-content-flex) {
      justify-content: flex-end;
    }
  }
</style>
